(function (fruit, ui) {
    ui.define('fruit.ui.Button', {
        view: {
            tag: 'button',
            props: {
                'class': 'f-btn {#theme}',
                type: 'button',
                role: 'button'
            },
            content: [
                {
                    name: 'icon',
                    tag: 'i'
                },
                {
                    name: 'text',
                    tag: 'span',
                    props: {
                        'class': 'f-btn-text'
                    },
                    content: '{#text}'
                },
                {
                    name: 'arrow',
                    tag: 'i'
                }
            ]
        },
        properties: {
            text: {
                value: null,
                observable: true
            },
            theme: {
                getter: function () {
                    var themeMap = {
                        "primary": 'f-btn-primary',
                        "CTA": 'f-btn-CTA'
                    };
                    return themeMap[this._theme] || "";
                },
                setter: function (value) {
                    this._theme = value;
                    this.notifyPropertyChanged('theme');
                }
            }
        }
    });

})(fruit, fruit.ui);